<template>
  <div class="tree-proxy-table-view">
    <div class="header-view" v-if="getHeaderValueList.length">
      <div
        class="table-item-view"
        v-for="(row,index) in getHeaderValueList"
        :key="index"
      >
        <div class="table-item-text">{{row}}</div>
      </div>
    </div>
    <Tree
      v-if="hasData"
      :props="treeProps"
      :load="loadNode"
      lazy
      :expand-on-click-node="false"
    >
      <div
        class="tree-node-item-view"
        slot-scope="{ node, data }"
        :style="getItemStyle(node)"
      >
        <div
          class="table-item-view"
          v-for="(row, index) in getHeaderKeyList"
          :key="index"
        >
          <div
            :class="getCurrTextStyle(node, row)"
          >
            {{ data[row] }}
          </div>
        </div>
      </div>
    </Tree>
    <div
      class="no-data"
      v-if="noData"
    >
      暂无数据
    </div>
  </div>
</template>

<script>

// components
import Tree from '@/components/Tree/Tree';

// utils
import { mapToArray, parserMoney } from '@/utils/base';

export default {
  name: 'tree-proxy-table',
  props: {
    headerMap: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    treeProps: {
      type: Object,
      default: () => ({
        isLeaf: 'leaf',
      }),
    },
    loading: {
      type: Boolean,
      default: true,
    },
    colorKeyList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getHeaderValueList() {
      return mapToArray(this.headerMap);
    },
    getHeaderKeyList() {
      return Object.keys(this.headerMap);
    },
    hasData() {
      return this.treeData.length;
    },
    noData() {
      return !this.treeData.length && !this.loading;
    },
  },
  components: {
    Tree,
  },
  methods: {
    getItemStyle({ level }) {
      let curr = (level - 1) % 13;
      curr = curr < 0 ? 0 : curr;
      const res = curr * 0.04;
      return {
        backgroundColor: `rgba(0, 0, 0, ${res})`,
      };
    },
    loadNode(node, resolve) {
      this.$emit('loadNode', node, resolve);
    },
    getCurrTextStyle(node, row) {
      let obj = { 'table-item-text': true };
      const value = node.data[row] || 0;
      if (this.colorKeyList.includes(row)) {
        const currVal = parserMoney(value);
        obj = {
          ...obj,
          'table-item-succ-text': currVal > 0,
          'table-item-fail-text': currVal < 0,
        };
      }
      return obj;
    },
  },
};
</script>

<style lang="scss" scoped>
  $header-height: 38px;
  @mixin tableItemView($height: $header-height) {
    height: $height;
    display: flex;
    justify-content: space-between;
  };
  .tree-proxy-table-view {

    .header-view {
      @include tableItemView();
      background-color: rgb(51, 153, 255);
    }

    .table-item-view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .table-item-text {
      color: #ffffff;
    }

    .tree-node-item-view {
      @include tableItemView();
      margin-left: -24px;
      width: 100%;

      .table-item-text {
        color: #000000;
      }

      .table-item-succ-text {
        color: #33FF66;
      }
      .table-item-fail-text {
        color: red;
      }
    }
    :global(.el-tree-node__content){
      height: $header-height;
      padding-left: 0 !important;
    }
    .no-data {
      padding-top: 15px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666666;
    }
  }

</style>
